/* 定义跳动动画 */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* 定义旋转动画 */
@keyframes route180 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* 离开时还原 */
@keyframes route180Reset {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.header-panel(@w,@h,@left) {
  width: @w;
  height: @h;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  z-index: 4;
  position: absolute;
  left: @left;
  top: 60px;
  background: #ffffff;
  display: flex;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e5e7;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  color: #000;
}

.header-panel-show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0s;
}

.header-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  // color: #ffffff;
  gap: 20px;
  box-sizing: border-box;

  .header-banner-left {
    font-size: 14px;
    flex-shrink: 0;
    height: 64px;

    ul > li > a {
      line-height: 60px;
    }

    ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;

      li {
        position: relative;
      }

      li:first-child a .icon-jiantoubottom {
        display: inline-block;
        animation: route180Reset 0.3s linear forwards;
      }

      li:first-child:hover a .icon-jiantoubottom {
        display: inline-block;
        animation: route180 0.5s linear forwards;
      }

      li:not(:first-child):not(:last-child) > a:hover {
        animation: jump 0.3s linear 1;
      }

      li:nth-child(4) > a:hover ~ .game-box,
      .game-box:hover {
        .header-panel-show;
      }

      .game-box {
        .header-panel(424px, 295px, auto);
        transform: translateX(-23%);
        flex-wrap: nowrap;

        a {
          padding: 0px;
        }

        .game-box-left {
          width: 230px;
          border-right: 0.5px solid #e3e5e7;
          padding-right: 20px;

          .game-box-left-top-img {
            width: 230px;
            height: 129px;
            border-radius: 8px;
          }

          .game-box-left-bottom {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin-top: 16px;

            .game-box-left-bottom-img {
              width: 66px;
              height: 66px;
              border-radius: 8px;
            }

            p {
              width: 66px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .game-box-right {
          padding: 0 20px;

          .game-box-right-game-list-title {
            font-size: 20px;
            line-height: 28px;
            padding: 0 0 15px 8px;
          }

          .game-box-right-game-list-item > a {
            display: inline-block;
            width: 120px;
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            color: #61666d;
            line-height: 29px;
            padding: 0 8px;
            box-sizing: border-box;
            vertical-align: top;
          }

          .game-box-right-game-list-item > a:hover {
            background-color: #e3e5e7;
            border-radius: 4px;
          }
        }
      }

      li:nth-child(6) > a:hover ~ .comic-box,
      .comic-box:hover {
        .header-panel-show;
      }

      .comic-box {
        .header-panel(505px, 260px, auto);
        transform: translateX(-30%);

        .comic-box-left {
          width: 308px;
          height: 216px;
          font-size: 12px;
          line-height: 17px;
          border-right: 0.5px solid #e3e5e7;
          display: flex;
          gap: 4px;
          flex-wrap: wrap;
          flex-shrink: 0;
          align-content: space-around;

          a:hover {
            color: blue;
          }

          img {
            height: 77px;
            border-radius: 8px;
          }
        }

        .comic-box-right {
          width: 100%;
          height: 216px;
          margin-left: 12px;

          .comic-box-right-comic-list-title {
            font-size: 20px;
            line-height: 28px;
            padding: 0 0 15px 8px;
          }

          .comic-box-right-comic-list-item {
            a {
              display: inline-block;
              width: 145px;
              max-width: 200px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              color: #61666d;
              line-height: 29px;
              padding: 0 8px;
              box-sizing: border-box;
              vertical-align: top;
              span:nth-child(1) {
                margin-right: 5px;
                font-style: italic;
                font-weight: 600;
                color: #c9ccd0;
              }
              &:nth-child(1) > span:nth-child(1) {
                color: #ff473d;
              }
              &:nth-child(2) > span:nth-child(1) {
                color: #ff6a29;
              }
              &:nth-child(3) > span:nth-child(1) {
                color: #ff9214;
              }
            }
          }

          .comic-box-right-comic-list-item > a:hover {
            background-color: #e3e5e7;
            border-radius: 4px;
          }
        }
      }

      li:nth-child(7) > a:hover ~ .contest-box,
      .contest-box:hover {
        .header-panel-show;
      }

      .contest-box {
        .header-panel(650px, 298px, auto);
        transform: translateX(-30%);
        .contest-box-left {
          width: 315px;
          display: flex;
          flex-wrap: wrap;
          column-gap: 17px;
          row-gap: 14px;
          border-right: 0.5px solid #e3e5e7;

          img {
            border-radius: 8px;
          }

          img:not(:first-child) {
            width: 139px;
            height: 78px;
          }
        }

        .contest-box-right {
          width: 295px;
          color: #000;
          a {
            padding: 0;
          }

          .contest-box-right-title {
            font-size: 20px;
            letter-spacing: 1.5px;
            line-height: 28px;
            margin: 0 0 8px 16px;
          }

          & .contest-box-right-title:nth-of-type(2) {
            margin-top: 5px;
          }

          .contest-box-right-top {
            span {
              margin-right: 8px;
            }
            a > span:nth-child(1) {
              font-style: italic;
              font-weight: 600;
            }

            a:nth-child(1) > span:nth-child(1) {
              color: #ff473d;
            }
            a:nth-child(2) > span:nth-child(1) {
              color: #ff6a29;
            }
            a:nth-child(3) > span:nth-child(1) {
              color: #ff9214;
            }

            a {
              height: 31px;
              line-height: 31px;
              padding: 0 8px;
              display: flex;
              align-items: center;
              margin: 0 8px;
              border-radius: 5px;
              position: relative;

              span:nth-child(3) {
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
              }

              p {
                position: absolute;
                top: -47px;
                left: 6px;
                background-color: #000;
                color: #ffffff;
                border-radius: 8px;
                padding: 6px 8px;
                text-align: center;
                display: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 270px;
              }

              span:nth-child(3):hover ~ p {
                display: inline-block;
              }

              button {
                background-color: #ff6699;
                width: 45px;
                height: 20px;
                border: 0px;
                font-size: 12px;
                padding: 0px;
                border-radius: 5px;
                display: none;
              }
            }

            a:hover {
              background-color: #f1f2f3;
            }

            a:hover button {
              display: block;
            }
          }

          .contest-box-right-bottom {
            a {
              display: flex;
              align-items: center;
              font-size: 13px;
              color: #61666d;
              height: 31px;
              line-height: 31px;
              margin-left: 8px;
              padding: 0 8px;
              border-radius: 5px;
              position: relative;

              span {
                margin-right: 5px;
              }

              span:nth-child(2) {
                color: #000;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                flex: 1;
              }

              p {
                position: absolute;
                top: -47px;
                left: 36px;
                background-color: #000;
                color: #ffffff;
                border-radius: 8px;
                padding: 6px 8px;
                text-align: center;
                display: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 239px;
              }

              span:nth-child(2):hover ~ p {
                display: inline-block;
              }

              button {
                border: 1px solid #ff6699;
                background-color: #ffffff;
                font-size: 12px;
                width: 45px;
                height: 20px;
                color: #ff6699;
                border-radius: 4px;
              }
            }
            a:hover {
              background-color: #f1f2f3;
            }
          }
        }
      }

      li:nth-child(8) > a:hover ~ .download-box,
      .download-box:hover {
        .header-panel-show;
      }

      .download-box {
        .header-panel(387px, 216px, 50%);
        transform: translateX(-50%);
        flex-wrap: wrap;

        & div {
          p {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            .iconfont {
              font-weight: 100;
            }
          }

          p:nth-of-type(2) {
            font-size: 12px;
            line-height: 17px;
            color: #61666d;
            margin-bottom: 12px;
          }
        }

        .download-box-left {
          width: calc((100% - 1px) / 2);
          border-right: 0.5px solid #e3e5e7;
          display: flex;
          align-items: center;
          flex-direction: column;

          img {
            width: 95px;
            height: 95px;
            border: 0.5px solid #e3e5e7;
            border-radius: 8px;
            padding: 4px;
          }
        }

        .download-box-right {
          width: calc((100% - 1px) / 2);
          display: flex;
          align-items: center;
          flex-direction: column;
          flex: 1;

          img {
            width: 52px;
            height: 52px;
          }

          a {
            width: 90px;
            height: 30px;
            line-height: 30px;
            background-color: #40c5f1;
            color: #ffffff;
            border: 0;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
            padding: 0;
          }
        }

        .download-box-bottom {
          width: 387px;
          padding: 0;
          text-align: center;
          font-size: 12px;
          line-height: 40px;
          color: #9499a0;
          .iconfont {
            font-size: 12px;
            vertical-align: middle;
            font-weight: 600;
          }
        }

        .download-box-bottom:hover {
          color: #00aeec;
        }
      }

      .icon-bilibili-line {
        font-size: 18px;
        vertical-align: bottom;
        margin-right: 6px;
      }

      .icon-xiazai {
        vertical-align: bottom;
      }
    }
  }

  .header-banner-middle {
    flex: 1;

    .search-bar:hover {
      background-color: rgba(227, 234, 238, 0.9);
    }

    .search-bar {
      background-color: rgba(227, 234, 238, 0.7);
      border-radius: 8px;
      padding: 0 4px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;

      .searchInput {
        background-color: rgba(227, 234, 238, 0);
        border: 0px;
        border-radius: 8px;
        line-height: 30px;
        padding-left: 14px;
        font-size: 14px;
        color: #61666d;
        flex: 1;
      }

      input:focus {
        outline: none;
        border: none;
        box-shadow: none;
        background-color: rgba(227, 234, 238, 0.9);
      }

      .iconfont {
        font-size: 22px;
        color: #000;
        cursor: pointer;
        border-radius: 8px;
        padding: 5px;
      }
      .iconfont:hover {
        background-color: rgba(227, 234, 238, 0.9);
      }
    }
  }

  .header-banner-right {
    flex-shrink: 0;
    height: inherit;
    height: 64px;

    ul {
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: center;
      height: inherit;
      font-size: 14px;

      & > li {
        height: inherit;
        display: flex;
        align-items: center;
        position: relative;
      }

      .iconfont-header {
        display: inline-block;
        font-size: 20px;
        // text-shadow: 0 0 2px currentColor;
      }

      li:hover a .iconfont-header {
        animation: jump 0.3s linear 1;
      }

      .head-pic {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        transition: transform 0.3s ease-in-out;
        transform: translate(0, 0) scale(1);
        position: relative;
        z-index: 5;
      }

      .head-pic-active {
        transform: translate(-10px, 30px) scale(2);
      }

      .button-submit {
        width: 90px;
        height: 34px;
        border-radius: 8px;
        background: #fb7299;
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: 1px;

        .iconfont {
          font-size: 24px;
        }
      }

      .button-submit:hover {
        background-color: rgba(251, 114, 153, 0.9);
      }

      // 用户信息
      .user-info-box {
        .header-panel(300px,auto,auto);
        display: block;
        right: -116px;
        padding: 60px 24px 15px 24px;

        .user-name {
          font-weight: 600;
          font-size: 18px;
        }

        .coins-item {
          margin: 10px 0;
          font-size: 12px;
          .coins-text {
            color: #9499a0;
            margin-left: 10px;
          }
        }

        .level-progress-box {
          .level-progress {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            .iconfont {
              color: #e3e5e7;
              font-size: 22px;
            }

            .iconfont:first-child {
              color: #00aeec;
            }

            .level-progress-bac {
              width: 187px;
              height: 2px;
              background-color: #e3e5e7;

              .level-progress-color {
                width: 30%;
                height: 2px;
                background-color: #f3cb85;
              }
            }
          }

          p {
            font-size: 12px;
            color: #c9ccd0;
            text-align: start;
            padding-left: 23px;
          }
        }

        .counts-item {
          margin: 10px 0;
          display: flex;
          justify-content: space-around;
          color: #9499a0;
          font-size: 12px;

          .counts-num {
            font-size: 18px;
            font-weight: 600;
            color: #000;
          }

          & a:hover p {
            color: #00aeec;
          }
        }

        .vip-item {
          display: flex;
          justify-content: center;
          align-items: center;
          justify-content: space-between;
          background-color: rgb(255, 236, 241);
          padding: 9px 12px;
          color: rgb(255, 102, 153);
          border-radius: 6px;
          cursor: pointer;

          .vip-text {
            font-size: 14px;
            text-align: left;
            p:last-of-type {
              font-size: 12px;
              color: rgba(24, 25, 28, 0.6);
            }
          }

          .vip-text-box {
            background-color: #ffffff;
            line-height: 17px;
            font-size: 12px;
            width: 68px;
            padding: 6px 0;
            border-radius: 6px;
          }
        }

        .link-item {
          ul {
            display: flex;
            flex-direction: column;
            gap: 5px;

            li,
            a {
              width: 100%;
            }

            a {
              padding: 0;
            }

            li:first-child {
              margin-top: 30px;
            }

            li {
              padding: 10px;
              color: #61666d;
              font-size: 14px;
              box-sizing: border-box;
              border-radius: 8px;
            }

            li:hover {
              background-color: #e3e5e7;
            }

            .line {
              border: 1px solid #e3e5e7;
              width: 100%;
            }

            li > a {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .iconfont {
                margin-right: 5px;
              }
            }
          }
        }
      }

      li:nth-child(1):hover .user-info-box,
      .user-info-box:hover,
      li:nth-child(1):hover .login-box,
      .login-box:hover {
        .header-panel-show;
      }

      // 未登录用户信息
      .login-text {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #00aeec;
        text-align: center;
        line-height: 38px;
        font-size: 14px;
        font-weight: 600;
      }

      .login-box {
        .header-panel(359px,auto,50%);
        transform: translateX(-50%);

        flex-direction: column;
        text-align: left;
        gap: 20px;
        font-size: 14px;

        .login-box-item {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-row-gap: 10px;

          a {
            padding: 0;
          }

          .iconfont {
            font-size: 24px;
            color: #00aeec;
            vertical-align: middle;
            padding-right: 4px;
          }
        }

        .login-but {
          line-height: 40px;
          background-color: #00aeec;
          text-align: center;
          color: #ffffff;
          letter-spacing: 1px;
          font-weight: 600;
          border-radius: 8px;
          cursor: pointer;

          &:hover {
            background-color: rgba(0, 174, 236, 0.9);
          }
        }

        .register-item {
          text-align: center;
          .register-link {
            color: #00aeec;
            cursor: pointer;
          }
        }
      }

      // vip
      .vip-box {
        .header-panel(444px,224px,50%);
        transform: translateX(-50%);
        flex-direction: column;
        justify-content: space-around;

        a {
          padding: 0;
        }

        .vip-box-top {
          width: 260px;
          text-align: left;

          & > a {
            font-weight: 600;
            width: 100%;
            margin-bottom: 10px;
            font-size: 16px;
          }

          & > a:hover {
            color: #fb7199;
          }

          div {
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;
            font-size: 14px;

            a {
              width: calc((100% - 1px) / 2);
              box-sizing: border-box;
              line-height: 30px;

              &:hover {
                color: #fb7199;
              }

              .iconfont {
                margin-right: 6px;
                color: #fb7199;
                font-weight: 600;
                font-size: 20px;
                vertical-align: end;
              }
            }
          }
        }

        .vip-box-bottom {
          display: flex;
          text-align: left;
          background-color: #ffecf1;
          border-radius: 8px;
          padding: 14px 9px 13px;
          justify-content: space-between;
          align-items: center;

          .vip-box-bottom-left {
            font-size: 14px;
            color: #ff6699;
            line-height: 20px;

            p:nth-of-type(2) {
              font-size: 12px;
            }
          }

          .vip-box-bottom-right {
            width: 140px;
            height: 44px;
            background-color: #ff6699;
            border-radius: 8px;
            text-align: center;
            line-height: 44px;
            color: #ffffff;
            position: relative;
            cursor: pointer;

            .vip-box-bottom-tip {
              background: linear-gradient(to right, #ffeec9, #ffc65d);
              color: #000;
              position: absolute;
              font-size: 10px;
              font-weight: 400;
              line-height: 15px;
              top: -5px;
              padding: 0 2px;
              right: 0;
              border-radius: 2px;
            }
          }
        }
      }

      li:nth-child(2):hover .vip-box,
      .vip-box:hover {
        .header-panel-show;
      }

      // 消息
      .msg-box {
        .header-panel(142px, auto, 50%);
        transform: translateX(-50%);
        flex-direction: column;
        padding: 10px 0;
        color: #61666d;

        a {
          width: 100%;
          padding: 0;
          line-height: 40px;
          padding-left: 38px;
          box-sizing: border-box;
          text-align: left;
        }

        a:hover {
          background-color: #e3e5e7;
        }
      }

      li:nth-child(3):hover .msg-box,
      .msg-box:hover {
        .header-panel-show;
      }

      // 动态
      .dynamics-box {
        .header-panel(370px,auto,50%);
        flex-direction: column;
        transform: translateX(-50%);
        padding: 0px;
        max-height: 530px;

        & > p {
          padding: 20px;
          text-align: left;
          font-size: 16px;
          font-weight: 600;
        }

        .dynamics-line {
          display: flex;
          align-items: center;
          color: #9499a0;
          justify-content: space-between;
          gap: 10px;
          font-size: 12px;
          padding: 0 20px 5px;

          div {
            border-top: 0.5px solid #9499a0;
            flex: 1;
          }
        }

        .dynamic-item {
          display: flex;
          text-align: left;
          padding: 20px;
          cursor: pointer;

          img {
            width: 34px;
            height: 34px;
            border-radius: 34px;
          }

          .dynamic-item-text {
            width: 225px;
            padding: 0 12px;
            box-sizing: border-box;
            font-size: 14px;

            div {
              line-height: 20px;
              margin: 5px 0px;
            }

            p:first-child {
              font-size: 13px;
              color: #61666d;
            }

            p:last-child {
              font-size: 12px;
              color: #9499a0;
            }
          }
        }

        .dynamic-item:hover {
          background-color: #e3e5e7;
        }

        .cat-more {
          text-align: center;
          margin: 10px 20px;
          background-color: #f6f7f8;
          line-height: 35px;
          border-radius: 4px;
          cursor: pointer;
          .iconfont {
            vertical-align: middle;
            font-weight: 600;
          }
        }
      }

      li:nth-child(4):hover .dynamics-box,
      .dynamics-box:hover {
        .header-panel-show;
      }

      // 收藏
      .collect-box {
        .header-panel(520px,540px,-300%);
        transform: translateX(-50%);
        padding: 0px;

        .collect-item {
          display: flex;
          flex-direction: column;
          width: 150px;
          line-height: 46px;
          padding: 10px 0;
          border-right: 1px solid #e3e5e7;
          a {
            padding: 0;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;

            span {
              flex-shrink: 0;
            }

            span:first-child {
              width: 96px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .collect-box-right {
          flex: 1;

          .collect-text {
            height: 493px;
            border-bottom: 1px solid #e3e5e7;
            box-sizing: border-box;
            padding: 10px 0;

            .collect-text-label {
              padding: 10px 10px 10px 20px;
              display: flex;
              text-align: left;

              img {
                width: 128px;
                height: 72px;
                border-radius: 4px;
              }

              & > div {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 0 10px;

                .video-title {
                  -webkit-box-orient: vertical; /* 垂直排列 */
                  -webkit-line-clamp: 2; /* 限制最多 2 行 */
                  overflow: hidden; /* 隐藏超出部分 */
                  text-overflow: ellipsis; /* 省略号 */
                  word-break: break-word; /* 避免长单词撑破 */
                  display: -webkit-box;
                }

                .video-author {
                  color: #9499a0;
                  font-size: 13px;

                  .iconfont {
                    vertical-align: middle;
                    margin-right: 5px;
                  }
                }
              }
            }

            .collect-text-label:hover {
              background-color: #e3e5e7;
              cursor: pointer;
            }
          }

          .collect-box-right-bottom {
            display: flex;
            cursor: pointer;

            div:first-child {
              border-right: 1px solid #e3e5e7;
            }

            div {
              flex: 1;
              line-height: 45px;

              .iconfont {
                vertical-align: middle;
              }
            }
          }
        }
      }

      li:nth-child(5):hover .collect-box,
      .collect-box:hover {
        .header-panel-show;
      }

      .history-box {
        .header-panel(370px,540px,-60%);
        transform: translateX(-50%);
        display: block;
        padding: 0;

        .history-label {
          display: flex;
          font-size: 14px;
          cursor: pointer;
          border-bottom: 0.5px solid #e3e5e7;
          div {
            flex: 1 auto;
            padding: 15px 0;
          }

          div:first-child {
            color: #00aeec;
            border-bottom: 3px solid #00aeec;
          }
        }

        .history-content {
          height: 480px;
          padding: 0 20px;
        }
      }

      li:nth-child(6):hover .history-box,
      .history-box:hover {
        .header-panel-show;
      }

      .submit-box {
        .header-panel(330px,auto,auto);
        right: 4px;
        padding: 10px;
        font-size: 12px;
        color: #61666d;

        a {
          padding: 0;
          width: 62px;
          height: 63px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 5px;
          .iconfont {
            font-size: 26px;
          }
        }

        a:hover {
          background-color: #e3e5e7;
          border-radius: 8px;
        }
      }

      li:nth-child(8):hover .submit-box,
      .submit-box:hover {
        .header-panel-show;
      }
    }
  }
}
